<template>
	<view class="zy-tools-layout">
		<view class="zy-tools-list">
			<view class="zy-tools-list-item" v-for="item in list" :key="item.type" @tap="didSelectItem(item)">
				<image :src="item.icon" mode="aspectFit"></image>
				<text class="my-menu-item-title">{{item.name}}</text>
				<view class="my-menu-right">
					<view v-if="item.type == 3">
						<text class="my-menu-right-text">{{userStore.user.qrCode}}</text>
						<text class="my-menu-right-copy" @tap="copyAction()">复制</text>
					</view>
					<xh-icon icon="icon_jiantou" v-if="item.type != 3"></xh-icon>
				</view>
				<view class="line zy-tools-list-item-line"></view>
			</view>
		</view>
		<xh-auth-pop ref="authRef"></xh-auth-pop>
	</view>
</template>

<script setup>
	import { onLoad } from '@dcloudio/uni-app'
	import { ref } from 'vue'
	import { useUserStore,useFormStore } from '@/common/stores'
	const userStore = useUserStore()
	const formStore = useFormStore()
	const authRef = ref(null)
	
	const list = ref([{
			name: '新增代理商',
			icon: '/static/home/add_agent_icon@2x.png',
			type: 1
		},
		{
			name: 'APP下载二维码',
			icon: '/static/my/my_menu_icon7_KDB@2x.png',
			type: 2
		}
	])
	// 复制
	const copyAction = () => {
		uni.$utils.copy(userStore.user.qrCode)
	}
	// 点击
	const didSelectItem = (item) => {
		if (item.type == 1) {
			if(!userStore.isAuth){
				authRef.value.open()
				return
			}
			formStore.$reset()
			uni.navigateTo({
				url: '/pages/home/zy-tools/add-agent/add-agent'
			})
		} else if (item.type == 2) {
			uni.navigateTo({
				url: '/pages/home/zy-tools/app-downloaod-qrcode/app-downloaod-qrcode'
			})
		}
	}
	onLoad(() => {
		if (userStore.isAuth) {
			list.value.push({
				name: '我的推荐码',
				icon: '/static/my/my_menu_icon3_KDB@2x.png',
				type: 3
			})
		}

	})
</script>

<style lang="scss" scoped>
	.zy-tools-layout {
		.zy-tools-list {
			background-color: #fff;
			margin-top: 20rpx;

			.zy-tools-list-item {
				display: flex;
				align-items: center;
				padding: 30rpx 30rpx;
				position: relative;

				.zy-tools-list-item-line {
					left: 30rpx;
				}

				image {
					width: 48rpx;
					height: 48rpx;
				}

				.my-menu-item-title {
					margin-left: 20rpx;
				}

				.my-menu-right {
					margin-left: auto;

					.my-menu-right-copy {
						color: $xh-theme-color;
						margin-left: 10rpx;
					}

					.my-menu-right-text {
						color: $xh-orange-color;
					}
				}
			}
		}
	}
</style>